/*
 * 学习目标：Todo-Redux
 * 需求1：创建redux仓库、App组件中能够获取state
 * 1. src/store/reducer/todo.js reducer函数
 * 2. src/store/index 创建store createStore
 * 3. Provider组件设置store属性
 * 4. useSelector获取store中的数据
 
 */

/*
 * 学习目标：渲染任务列表
 * 1：准备初始数据 list
 * 2：Main 组件中 使用useSelector获取数据
 * 3. 渲染任务列表
 *
 */

/*
  学习目标：根据id，修改一条数据
  步骤：
     1. 封装Action创建函数 快捷键：enf
     2. onChange事件触发dispatch，payload 传id
     3. reducer中完成更新的计算
      {
        ...state,
        list: state.list.map((item) => {
          return { ...item, isDone: item.id === payload ? !item.isDone : item.isDone };
        }),
      }
*/
/*
  学习目标：根据id，删除一条数据
  步骤：
     1. 封装Action创建函数 快捷键：enf
     2. onClick事件触发dispatch，payload 传id
     3. reducer中完成删除的计算
        {...state, list: state.list.filter((item) => item.id !== payload) }
*/

/*
  学习目标：
    需求1：受控组件改造
    需求2： 实现新增
  步骤：
     1.1 state控制value或者checked
     1.2 onChange配合setState修改state 

     2.1 封装action创建函数
     2.2 回车事件触发dispatch
     2.3 完成计算
     2.4 清空输入框的值
*/
/*
  学习目标：小选影响全选
  原理：🔔useSelector在源码内部声明state，dispatch最终触发React的state变化，导致界面刷新
  1. 定义计算属性 
     const isAll = list.length ? list.every((item) => item.isDone) : false;
  2. 设置：checked={isAll}
*/

/*
  学习目标：全选影响小选
  步骤：
      1. action创建函数
      2. onChange触发dispatch
      3. reducer中完成全选的计算
      {
        ...state,
        list: state.list.map((item) => {
          return { ...item, isDone: payload };
        }),
      };
*/

import React from 'react';
import Footer from './components/Footer';
import Header from './components/Header';
import Main from './components/Main';
import './styles/base.css';
import './styles/index.css';

export default function App(params) {
  return (
    <section className="todoapp">
      <Header />
      <Main />
      <Footer />
    </section>
  );
}
